<template>
  <div class="btn">
    <!-- 滚动提醒条 -->
    <div class="scrolling-alert">
      <div class="alert-content">
        温馨提示：请及时缴纳水电燃气费，避免因欠费导致停水停电停气给您的生活带来不便。温馨提示：请及时缴纳水电燃气费，避免因欠费导致停水停电停气给您的生活带来不便。
      </div>
    </div>

    <el-card style="width: 100%;color: #ff9b06;font-weight: bold;" shadow="hover">
      <div style="display: flex; justify-content: space-between; width: 100%;">
        <el-button
            type="warning" plain
            @click="goToUsage"
            style="width: 100%;"
        >
          查看我的用量
        </el-button>
        <el-button type="danger" plain :icon="JiaoFei" @click="add" style="width: 100%;">
          点击缴费
        </el-button>
      </div>

      <span style="margin-right: 50px">电费余额：{{electricity}}</span>
      <span style="margin-right: 50px">水费余额：{{water}}</span>
      <span style="margin-right: 50px">燃气余额：{{gas}}</span>
    </el-card>
  </div>

  <div>
    <el-dialog v-model="dialog.show" title="费用缴纳" width="500px" :close-on-click-modal="false">
      <div>
        <Add
            v-if="dialog.show"
            v-model:show="dialog.show"
            v-model:electricity="electricity"
            v-model:water="water"
            v-model:gas="gas"
            @getTableData="getTableData"
        />
      </div>
    </el-dialog>
    <el-table :data="tableData.records" border style="width: 100%">
      <el-table-column label="我的费用缴纳记录" align="center">
        <el-table-column prop="createTime" label="缴费时间" align="center" width="250px">
        </el-table-column>
        <el-table-column prop="type" label="类别" align="center"
                         :filters="[
                { text: '水费', value: '水费' },
                { text: '电费', value: '电费' },
                { text: '燃气费',value: '燃气费'}
            ]"
                         column-key="type"
                         :filter-method="filterHandler">
        </el-table-column>
        <el-table-column prop="amount" label="缴费金额" align="center" width="200px">
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        :page-count="tableData.pages"
        v-model:current-page="params.page"
        :total="tableData.total"
        :close-on-click-modal="false"
        @current-change="getTableData()"
        style="margin-top:30px;">
    </el-pagination>
  </div>
</template>

<script setup>
import JiaoFei from '@/views/service/components/icon/jiaofei'
import { getCookieForObject, setCookiesFromObject } from '@/util';
import { ref, reactive, computed } from 'vue'
import Add from './add'
import { get, post } from '@/plugins/axios'
import {_axios} from '@/plugins/axios'
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const water = ref(0)
const electricity = ref(0)
const gas = ref(0) // 新增燃气费
const dialog = reactive({
  show: false,
  title: '',
  id: null
})
const tableData = reactive({
  records: [] ,// 初始化为空数组
  filters: {},
  pages: 0,
  total: 0
});
const params = reactive({
  page: 1,
  limit: 10
})

// 初始化
onMounted(() => {
  init();
});
init()
function init(){
  const user = getCookieForObject('user')
  if (user) {
    water.value = parseFloat(user.water);
    electricity.value=parseFloat(user.electricity);
    gas.value = parseFloat(user.gas ); // 新增燃气费
  }
  console.log(user)
}

function getUserId(){
  const userinfo = getCookieForObject('user')
  return userinfo.id
}
const userId = getUserId()

getTableData()
function getTableData(){
  init()
  post('/bill/llist',{userId:userId,pageNo:params.page, pageSize:params.limit },content=>{
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}

function add(){
  dialog.show = true
  init()
}

function goToUsage() {
  router.push({ name: 'ShowFee' });
}

// 筛选方法
function filterHandler(value, row, column) {
  const property = column['property'];
  return row[property] === value;
}
</script>

<style scoped lang="scss">
/* 滚动提醒条样式 */
.scrolling-alert {
  width: 100%;
  overflow: hidden;
  border: 1px solid #c04b21; /* 添加蓝色边框 */
  border-radius: 4px; /* 添加圆角效果 */
  background-color: white;
  font-weight: bold;
  color: #ff8a48;
  padding: 10px 0;
  font-size: 25px;
  white-space: nowrap;
  margin-bottom: 2px; /* 添加底部间距 */
}

.alert-content {
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
